<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Single Page Application</title>
</head>
<style>
    .pageview{
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        -webkit-transition: 0.4s ease-out -webkit-transform;

    }
</style>
<script type="text/javascript">
     //页面向左移动
     var currentViewStart="translateX(0%)"//currentView的初始位置
     var applyViewStart="translateX(100%)",//applyView的初始位置
     var currentViewEnd="translateX(-100%)",//currentView的最终位置
     var applyViewEnd="translateX(0%)",//applyView的最终位置
    if(direction=="right"){
         var currentViewStart="translateX(0%)"//currentView的初始位置
         var applyViewStart="translateX(-100%)",//applyView的初始位置
         var currentViewEnd="translateX(100%)",//currentView的最终位置

       initViewPool:function{
          var views=document.querySelectorAll(".pageView");
          //通过call使用数组的forEach来遍历NodeList
             Array.prototype.forEach.call(views,function(item){
            //viewPool是一个全局对象
                 viewPool[item.id]=item;//将DOM的id作为键
             }
         });
      }
</script>
<body>
        <div class="pageview" style="background: #3b76c0"id="main-view">
            <h3>首页</h3>
            <div title="list-view" class="right-arrow"></div>
        </div>
        <div class="pageview" style="background: #58c03b;display: none"id="list-view">
            <h3>列表页面</h3>
            <div class="left-arrow"></div>
            <div title="detail-view" class="right-arrow"></div>
        </div>
        <div class="pageview" style="background: #c03b25;display: none"id="detail-view">
            <h3>列表详情页面</h3>
            <div class="left-arrow"></div>
        </div>
</body>
</html>